<div
  class="devui-form-group devui-has-feedback"
  [ngClass]="{
    'devui-select-open': dropDownOpen
  }"
  #editableSelectBox
>
  <input
    (click)="toggle($event)"
    style="cursor: pointer"
    class="devui-form-control devui-dropdown-origin"
    type="text"
    name="autoCompleteControl"
    [source]="source"
    (ngModelChange)="onTermChange($event)"
    [ngModel]="inputValue"
    [searchFn]="searchFn"
    [disabled]="disabled"
    [disabledKey]="disabledKey"
    [placeholder]="placeholder"
    [itemTemplate]="itemTemplate"
    [noResultItemTemplate]="noResultItemTemplate ? noResultItemTemplate : noDataTemplate"
    [appendToBody]="appendToBody"
    [maxHeight]="maxHeight"
    [sceneType]="'select'"
    [dAutoCompleteWidth]="width"
    dAutoComplete
    [showAnimation]="showAnimation"
    (selectValue)="selectValue($event)"
    [enableLazyLoad]="enableLazyLoad"
    (loadMore)="loadMoreEvent($event)"
  />
  <span class="devui-form-control-feedback">
    <span class="devui-select-chevron-icon">
      <svg
        width="1em"
        height="1em"
        viewBox="0 0 16 16"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
      >
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <path
            d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824 12.2402148,6.7597852 12.1464466,6.85355339 Z"
            fill-rule="nonzero"
          ></path>
        </g>
      </svg>
    </span>
  </span>
</div>
<ng-template #noDataTemplate>
  <div class="devui-no-data-tip">
    <ng-container *ngIf="!inputValue">{{ i18nCommonText?.noData }}</ng-container>
    <ng-container *ngIf="inputValue">{{ i18nCommonText?.noRecordsFound }}</ng-container>
  </div>
</ng-template>
